<template>
  <div class="obody">
    <div class="progress-container">
      <div class="progress-bar" :style="{ width: progress + '%' }"></div>
    </div>
    <div class="step-info">STEP 1/7</div>
    <p>账户信息</p>

    <van-cell-group inset>
      <van-field v-model="value1" left-icon="search" placeholder="Email" />
      <van-field v-model="value2" left-icon="manager-o" placeholder="用户名" />
      <van-field type="password" v-model="value3" left-icon="shield-o" placeholder="密码" />
      <van-field type="password" v-model="value4" left-icon="shield-o" placeholder="确认密码" />
    </van-cell-group>

    <div class="gender-selection">
      <p>选择性别</p>
      <van-radio-group v-model="selectedGender">
        <van-radio name="male">男</van-radio>
        <van-radio name="female">女</van-radio>
      </van-radio-group>
    </div>

    <van-button type="primary" size="large" color="#6c5dd3" @click="register"> 下一步 </van-button>

    <div class="txt">以下方式登录</div>
    <div class="imgs">
      <img src="./imgs/qq.png" />
      <img src="./imgs/微信.png" />
      <img src="./imgs/微博.png" />
      <img src="./imgs/苹果账号.png" />
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import http from '@/utils/http'

const router = useRouter()
const currentStep = ref(1)
const totalSteps = 7
const progress = (currentStep.value / totalSteps) * 100

const selectedGender = ref('male') // 默认选择“男”
const value1 = ref('') // Email
const value2 = ref('') // 用户名
const value3 = ref('') // 密码
const value4 = ref('') // 确认密码
// 注册函数
function register() {
  // 确保密码一致性
  if (value3.value !== value4.value) {
    alert('密码和确认密码不一致')
    return
  }
  http({
    url: '/user/register',
    method: 'POST',
    data: {
      phone: value1.value,
      username: value2.value,
      password: value3.value,
      gender: selectedGender.value,
    },
  })
    .then((response) => {
      console.log(response.data)
      if (response.data.code === 200) {
        // 注册成功后跳转
        router.push('/maibox')
      } else {
        // 处理注册失败情况
      }
    })
    .catch((error) => {
      console.error('注册请求发生错误:', error)
    })
}
</script>

<style scoped>
.obody {
  padding: 30px;
}
.progress-container {
  width: 100%;
  height: 4px; /* 进度条高度 */
  background-color: #e0e0e0; /* 背景颜色 */
  margin: 10px 0 40px; /* 外边距 */
}
.progress-bar {
  height: 100%;
  background-color: #6c5dd3; /* 进度条颜色 */
  transition: width 0.3s ease; /* 动画效果 */
}
.gender-selection {
  margin-top: 20px; /* 顶部间距 */
}
.gender-selection p {
  font-size: 18px; /* 文字大小 */
  color: #333; /* 文字颜色 */
  margin-left: 15px;
}
.van-radio-group {
  display: flex;
  margin-left: 15px;
}
.step-info {
  font-size: 12px;
  color: #6c5dd3;
}
p {
  font-size: 25px;
  margin: 10px 0 30px;
}
.van-field {
  border: 1px solid #cecece;
  background-color: #f6f7f8;
  margin-top: 10px;
}
.van-field {
  border: none;
  background-color: #f6f7f8;
}

.van-button {
  margin-top: 50px;
  border-radius: 15px;
}
.txt {
  text-align: center;
  font-size: 14px;
  color: #777;
  margin-top: 60px;
}
.imgs {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.imgs > img {
  width: 40px;
  margin: 10px 18px 0;
}
</style>
